{% extends 'base_main.html' %}


{% load static %}


{% block ext_css %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'axf/main/css/home.css' %}">
    <link rel="stylesheet" href="{% static 'css/swiper.css' %}">
{% endblock %}

{##}
{% block footer %}
    {{ block.super }}
{% endblock %}

{% block ext_js %}
    <script type="text/javascript" src="{% static 'js/swiper.jquery.js' %}"></script>
    <script type="text/javascript" src="{% static 'axf/main/js/home.js' %}"></script>
{% endblock %}

{% block content %}
    <div id="home">
{#                轮播#}
                <div class="swiper-container" id="topSwiper">
                    <div class="swiper-wrapper">
                        {% for wheel in wheels %}
                          <div class="swiper-slide">
                                <a>
                                    <img src="{{ wheel.img }}" alt="{{ wheel.name }}">
                                </a>
                          </div>
                        {% endfor %}
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>
                </div>
{#                导航#}
                <div class="topMenu">
                    <nav>
                        <ul>
                            {% for nav in navs %}
                                <li>
                                    <img src="{{ nav.img }}" alt="{{ nav.name }}">
                                    <span>{{ nav.name }}</span>
                                </li>
                            {% endfor %}
                        </ul>
                    </nav>
                </div>
{#                轮播#}
                <div id="swiperMenu" class="swiper-container">
                    <ul class="swiper-wrapper">
                        {% for mustbuy in mustbuys %}
                            <li class="swiper-slide">
                                <img src="{{ mustbuy.img }}" alt="{{ mustbuy.name }}">
                            </li>
                        {% endfor %}
                    </ul>
                </div>

                <div class="Shop_Container">
                    <h2>
                        <img src="{{ shop0_1.0.img }}" alt="{{ shop0_1.0.name }}">
                    </h2>
                    <fieldset>
                        {% for shop in shop1_3 %}
                            <a>
                                <img src="{{ shop.img }}" alt="{{ shop.name }}">
                            </a>
                        {% endfor %}
                    </fieldset>

                    <ul>
                        {% for shop in shop3_7 %}
                            <li>
                                <img src="{{ shop.img }}" alt="{{ shop.name }}">
                                <span>{{ shop.name }}</span>
                            </li>
                        {% endfor %}
                    </ul>

                    <ol>
                        {% for shop in shop7_11 %}
                            <li>
                                <a>
                                    <img src="{{ shop.img }}" alt="{{ shop.name }}">
                                </a>
                            </li>
                        {% endfor %}
                    </ol>
                </div>


                <div class="mainInfo">
                     {% for mainshow in mainshows %}
                         <section >
                        <h3>
                            {{ mainshow.name }}
                            <a href="">更多>>

                            </a>
                            <span>

                            </span>
                        </h3>
                        <div>
                            <a href="">
                                <img src="{{ mainshow.img }}" alt="{{ mainshow.brandname }}">

                            </a>
                        </div>
                        <ul >
                            <li >
                                <a href="" >
                                    <img src="{{ mainshow.img1 }}" alt="{{ mainshow.longname1 }}">
                                    <p class="description">{{ mainshow.longname1 }}</p>
                                    <span>￥{{ mainshow.price1 }}</span>
                                    <s>￥{{ mainshow.marketprice1 }}</s>
                                </a>
                                <button>
                                    <span>+</span>
                                </button>
                            </li>
                            <li >
                                <a href="" >
                                    <img src="{{ mainshow.img2 }}" alt="{{ mainshow.longname2 }}">
                                    <p class="description">{{ mainshow.longname2 }}</p>
                                    <span>￥{{ mainshow.price2 }}</span>
                                    <s>￥{{ mainshow.marketprice2 }}</s>
                                </a>
                                <button>
                                    <span>+</span>
                                </button>
                            </li>
                             <li >
                                <a href="" >
                                    <img src="{{ mainshow.img3 }}" alt="{{ mainshow.longname3 }}">
                                    <p class="description">{{ mainshow.longname3 }}</p>
                                    <span>￥{{ mainshow.price3 }}</span>
                                    <s>￥{{ mainshow.marketprice3 }}</s>
                                </a>
                                <button>
                                    <span>+</span>
                                </button>
                            </li>
                        </ul>
                    </section>
                     {% endfor %}
                </div>
    </div>
{% endblock %}
